<template>
  <view class="container">
    <view class="carousel">
      <swiper
        circular="true"
        duration="400"
        @change="swiperChange"
      >
        <swiper-item
          v-for="(item,index) in imgList"
          :key="index"
          class="swiper-item"
        >
          <view class="image-wrapper">
            <image
              :src="item" 
              class="loaded" 
              mode="aspectFill"
            />
          </view>
        </swiper-item>
      </swiper>
      <!-- 自定义swiper指示器 -->
      <view class="swiper-dots">
        <text class="num">
          {{ swiperCurrent+1 }}
        </text>
        <text class="sign">
          /
        </text>
        <text class="num">
          {{ swiperLength }}
        </text>
      </view>
    </view>
		
    <view class="introduce-section">
      <!--  分享按钮 -->
      <view class="share-btn">
        <text class="yticon icon-fenxiang2" />
        分享
        <button open-type="share" class="share-btn-text"></button>
      </view>
      <text class="title">
        {{goodName}}
      </text>
      <view class="price-box">
        <text class="price-tip">
          ¥
        </text>
        <text class="price">
          {{goodPrice}}
        </text>
      </view>
    </view>
		
    <view class="c-list">
      <!-- <view class="c-row b-b">
        <text class="tit">
          优惠券
        </text>
        <text class="con t-r red">
          领取优惠券
        </text>
        <text class="yticon icon-you" />
      </view> -->
      <view class="c-row b-b">
        <text class="tit">
          活动
        </text>
        <view class="con-list">
          <text>无</text>
        </view>
      </view>

    </view>

    <!-- 已选 -->
    <view class="c-list">
      <view class="c-row b-b" @click="handleClickDelivery">
        <text class="tit">
          已选
        </text>
        <view class="con-list">
          <view class="select-time">
            <text class="select-label">配送时间：</text>
            <text class="base-color">{{ (selectTime.length > 0 && `${selectTime[0]}至${selectTime[1]}`) || '请选择日期'}}</text>
          </view>
          <view>
            <text class="select-label">配送方式：</text>
            <text class="base-color">{{deliveryList[orderDeliveryType - 1].text}}</text>
          </view>
          <view>
            <text class="select-label">
              每次配送：
            </text>
            <text class="base-color">
              {{orderDailyNum}}
            </text>
            <text>份</text>
          </view>
          <view class="sum-piece">
            <text class="select-label">
              总份数：
            </text>
            <text class="base-color">
              {{orderSumAmount}}
            </text>
            <text>份</text>
          </view>
        </view>
        <text class="select-time-icon base-color yticon icon-you"></text>
      </view>
    </view>
		
    <!-- 图文详情 -->
    <view class="detail-desc">
      <view class="d-header">
        <text>图文详情</text>
      </view>
      <rich-text :nodes="desc" />
    </view>
		
    <!-- 底部操作菜单 -->
    <view class="page-bottom">
      <div
        class="sum-price"
      >
        <text>合计金额：</text>
        <text class="sum">￥{{orderSumPrice}}</text>
      </div>
      <!-- <navigator
        url="/pages/cart/cart"
        open-type="switchTab"
        class="p-b-btn"
      >
        <text class="yticon icon-gouwuche" />
        <text>购物车</text>
      </navigator> -->
			
      <view class="action-btn-group">
        <!-- <button
          type="primary"
          class="action-btn no-border add-cart-btn"
        >
          加入购物车
        </button> -->
        <button
          type="primary"
          class="action-btn no-border buy-now-btn"
          @click="buy"
        >
          立即订购
        </button>
      </view>
    </view>
		
		
    <!-- 规格-模态层弹窗 -->
    <view 
      class="popup spec" 
      :class="specClass"
      @touchmove.stop.prevent="stopPrevent"
    >
      <!-- 遮罩层 -->
      <view class="mask" />
      <view
        class="layer attr-content"
        @click.stop="stopPrevent"
      >
        <view class="a-t">
          <view class="right">
            配送设置
            <text class="yticon icon-fork" @click="toggleSpec"></text>
          </view>
        </view>
        <view
          class="attr-list"
        >
          <view class="item-list">
            <text class="attr-list-label">
              每次配送：
            </text>
            <view class="daily-set">
              <text @click="decrease">-</text>
              <text class="daily-num">{{dailyNum}}</text>
              <text @click="increase">+</text>
            </view>
          </view>
          <view class="item-list">
            <text class="attr-list-label">
              配送方式：
            </text>
            <view class="item-list-content">
              <text
                v-for="(item, index) in deliveryList"
                :key="index"
                :class="{'selected': (index + 1) === selectType }"
                @click="selectSpec(index)"
              >
                {{item.text}}
              </text>
            </view>
          </view>
          <view class="item-list">
            <text class="attr-list-label">
              配送日期：
            </text>
            <view class="item-list-time"  @click="showCalendar">
              <text class="selected-color">
                {{(selectedDate.length > 0 && `${selectedDate[0]}至${selectedDate[1]}`) || '请选择日期' }}
              </text>
              <text class="selected-color yticon icon-you" />
            </view>
            
          </view>
          <view class="item-list">
            <text class="attr-list-label">
              总份数：
            </text>
            <view class="sum-piece">
              <text class="selected-color">
                {{totalPiece}}
              </text>
              <text>份</text>
            </view>
            
          </view>
        </view>
        <button
          class="btn"
          @click="confirmDelivery"
        >
          完成(共计￥{{sumPrice}})
        </button>
      </view>
    </view>
    <calendar
      ref="calendar"
      :date="selectedDate"
      :insert="false"
      :clearDate="true"
      :range="range"
      :showSum="true"
      :sumPiece="calendarSum"
      :start-date="startDate"
      :deliverType="selectType"
      @confirm="confirm"
      @change="change"
      @clickDate="clickDate"
      @close="closeCanledar"
    />
    <login-modal />
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import LoginModal from '@/components/loginModal.vue'
import Calendar from '@/components/calendar/calendar.vue'
import { parseTime } from '@/utils/index.js'
export default{
  components: {
    Calendar,
    LoginModal
  },
  data() {
    return {
      specClass: 'none',
      specSelected:[],
			// 轮播的当前
      swiperCurrent: 0,
      swiperLength: 0,
      // 商品id
      goodId: 1,
      goodName: '低温鲜奶',
      goodImg: '',
      // 单价
      goodPrice: 3.1,
      
      // 配送方式
      selectType: 1,
      // 每日配送
      dailyNum: 1,
      // 总份数
      sumPiece: 0,
      // 日历多选
      range: true,
      // 日历开始时间
      startDate: parseTime(+new Date() + 3600000 * 24 * 3, '{y}-{m}-{d}'),
      // 选择的时间范围
      selectedDate: '',

      // 合计金额，商品详情页展示
      orderSumAmount: 0,
      orderDailyNum: 1,
      orderDeliveryType: 1,
      // 总计金额
      orderSumPrice: 0,
      // 已选时间
      selectTime: '',
      // 日历显示的份数
      calendarSum: 0,

      shareList: [],
      imgList: [],
      desc: '',
      // 配送方式
      deliveryList: [
        {
          text: '每日送',
          pid: 1,
        },
        // {
        //   text: '两日送',
        //   pid: 2,
        // },
        // {
        //   text: '工作日',
        //   pid: 3,
        // },
        // {
        //   text: '双休日',
        //   pid: 4,
        // },
      ],
    }
  },
  computed: {
    ...mapState(['hasLogin','userInfo']),
    // 总份数
    totalPiece() {
      return this.sumPiece * this.dailyNum
    },
    // 合计金额
    sumPrice() {
      const sumPrice = this.totalPiece * this.goodPrice
      return sumPrice.toFixed(2)
    },
    disabled() {
      return !(this.orderSumAmount > 0 && this.orderDailyNum > 0 && this.orderSumPrice > 0 && this.selectTime.length > 0)
    }
  },
  async onLoad(options){
    // 接收传值,id
    const id = options.id
    const goodDetail = await this.$api.json('getGoodDetail', { goodId: id })
    // console.log(goodDetail)
    this.goodId = id
    this.goodPrice = goodDetail.goodPrice
    this.goodName = goodDetail.goodName
    this.imgList = goodDetail.goodImgs
    this.swiperLength = this.imgList.length
    this.desc = `<div style="width:100%">
                  <img style="width:100%;display:block;" src="//img13.360buyimg.com/n1/jfs/t1/49643/25/1122/52105/5ceded02E763d43f4/1c3ecd564062c83d.jpg" />
                  <img style="width:100%;display:block;" src="//img13.360buyimg.com/n1/jfs/t1/118339/28/3131/176788/5ea63150Ecda0bbdf/a404ae9adc9634e2.jpg" />
                </div>`
  },
  onShareAppMessage(res) {
    if(!this.hasLogin) {
      this.showLogin()
      return
    }
    if (res.from === 'button') { // 来自页面内分享按钮
      console.log(res.target)
    }
    return {
      title: '低温奶嘉年华',
      path: `/pages/product/product?id=${this.goodId}`
    }
  },
  methods: {
    ...mapMutations(['showLogin']),
    // 轮播图切换
    swiperChange(e) {
      const index = e.detail.current
      this.swiperCurrent = index
    },
    // 规格弹窗开关
    toggleSpec() {
      if(this.specClass === 'show') {
        this.specClass = 'hide'
        setTimeout(() => {
          this.calendarSum = 0
          this.specClass = 'none'
        }, 250)
      }else if(this.specClass === 'none') {
        this.specClass = 'show'
      }
    },
    // 点击已选配送信息
    handleClickDelivery() {
      if(!this.hasLogin) {
        this.showLogin()
        return
      }
      this.selectedDate = this.selectTime
      this.sumPiece = this.orderSumAmount
      this.dailyNum = this.orderDailyNum
      this.selectType = this.orderDeliveryType
      this.toggleSpec()
    },
    // 配送信息确认
    confirmDelivery() {
      this.selectTime = this.selectedDate
      this.orderDeliveryType = this.selectType
      this.orderDailyNum = this.dailyNum
      this.orderSumAmount = this.totalPiece
      this.calendarSum = this.totalPiece
      this.orderSumPrice = this.sumPrice
      this.toggleSpec()
    },
    // 选择配送方式
    selectSpec(index) {
      this.selectType = index + 1
    },
    // 每日配送次数减
    decrease() {
      if(this.dailyNum === 1) {
        return
      }
      this.dailyNum--
    },
    // 每日配送次数加
    increase() {
      this.dailyNum++
    },
    // 显示日历
    showCalendar() {
      if(!this.date && this.range && this.startDate) {
        this.$refs['calendar'].isRangeInit = true
      } else {
        this.$refs['calendar'].isRangeInit = false
      }
      this.$refs['calendar'].open()
      this.calendarSum = this.sumPiece
    },
    // 关闭日历
    closeCanledar() {
      this.calendarSum = 0
    },
    // 日历确定
    confirm(e) {
      const range = e.range
      this.sumPiece = this.calendarSum
      if (e.range.before && e.range.after) {
        if(new Date(range.before).getTime() - new Date(range.after).getTime() > 0) {
          this.$api.msg('日期选择有误')
          return
        }
        if(range.data.length < 15) {
          uni.showToast({
            title: '配送天数需要至少为15天',
            duration: 2000,
            icon: 'none',
            position: 'bottom'
          })
          return
        }
        this.selectedDate = [e.range.before, e.range.after]
      }
      this.$refs.calendar.close()
    },
    // 日期选择
    change(e) {
      console.log('change', e)
    },
    // 点击日期
    clickDate(e) {
      // console.log('clickDate', e)
      const range = e.range
      if(range.before && range.after) {
        if(new Date(range.before).getTime() - new Date(range.after).getTime() > 0) {
          this.$api.msg('亲，开始和结束日期选反了')
          return
        }
        if(range.data.length < 15) {
          this.$api.msg('配送天数需要至少为15天')
          return
        }
        this.calendarSum = range.data.length
      }
    },
    // 计算总数
    handleSum() {

    },
    buy() {
      if(!this.hasLogin) {
        this.showLogin()
        return
      }
      if(this.disabled) {
        this.handleClickDelivery()
        return
      }
      const orderDetail = {
        goodId: this.goodId,
        goodName: this.goodName,
        goodPrice: this.goodPrice,
        goodImg: this.imgList[0],
        deliveryModel: this.orderDeliveryType,
        avgNumPreDay: this.orderDailyNum,
        totalNum: this.orderSumAmount,
        deliveryStart: this.selectTime[0],
        deliveryEnd: this.selectTime[1],
        orderSumPrice: this.orderSumPrice,
      }
      uni.navigateTo({
        url: `/pages/order/createOrder?orderDetail=${JSON.stringify(orderDetail)}`
      })
    },
    stopPrevent() {}
  },

}
</script>

<style lang='scss'>
	page{
		background: $page-color-base;
		padding-bottom: 160rpx;
	}
	.icon-you{
		font-size: $font-base + 2rpx;
		color: #888;
	}
	.carousel {
		height: 722rpx;
		position:relative;
		swiper{
			height: 100%;
		}
		.image-wrapper{
			width: 100%;
			height: 100%;
		}
		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		
  }
  .swiper-dots {
		display: flex;
		position: absolute;
		left: 60rpx;
		bottom: 15rpx;
		width: 72rpx;
		height: 36rpx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50px;
			font-size: 24rpx;
			color: #fff;
			text-align: center;
			line-height: 36rpx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36rpx;
			font-size: 12rpx;
			color: #fff;
			transform: translateX(-50%);
		}
	}
	
	/* 标题简介 */
	.introduce-section{
		background: #fff;
    padding: 20rpx 30rpx;
    position: relative;
		
		.title{
			font-size: 32rpx;
			color: $font-color-dark;
			height: 50rpx;
			line-height: 50rpx;
		}
		.price-box{
			display:flex;
			align-items:baseline;
			height: 64rpx;
			padding: 10rpx 0;
			font-size: 26rpx;
			color:$uni-color-primary;
		}
		.price{
			font-size: $font-lg + 2rpx;
		}
		.m-price{
			margin:0 12rpx;
			color: $font-color-light;
			text-decoration: line-through;
		}
		.coupon-tip{
			align-items: center;
			padding: 4rpx 10rpx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6rpx;
			line-height: 1;
			transform: translateY(-4rpx); 
		}
		.bot-row{
			display:flex;
			align-items:center;
			height: 50rpx;
			font-size: $font-sm;
			color: $font-color-light;
			text{
				flex: 1;
			}
		}
	}
  /* 分享 */
  .share-btn{
    width: 120rpx;
    height: 50rpx;
    border-top-left-radius: 25rpx;
    border-bottom-left-radius: 25rpx;
    position: absolute;
    right: 0;
    top: 20rpx;
    display: flex;
    justify-content:  center;
    align-items: center;
    font-size: $font-base;
    color: $uni-color-primary;
    background-color: #f2f2f2;
    .share-btn-text {
      position: absolute;
      width: 120rpx;
      height: 50rpx;
      border-top-left-radius: 25rpx;
      border-bottom-left-radius: 25rpx;
      top: 0;
      right: 0;
      opacity: 0;
    }
  }
  .icon-you{
    font-size: $font-sm;
    margin-left: 4rpx;
    color: $uni-color-primary;
  }
	
	.c-list{
		font-size: $font-sm + 2rpx;
		color: $font-color-base;
		background: #fff;
		.c-row{
			display:flex;
			align-items:center;
			padding: 20rpx 30rpx;
			position:relative;
    }
    .select-time-icon {
      position: absolute;
      top: calc(50% - 15rpx);
      right: 20rpx;
      transform: translate(-50%, 0);
    }
		.tit{
			width: 140rpx;
		}
		.con{
			flex: 1;
			color: $font-color-dark;
			.selected-text{
				margin-right: 10rpx;
			}
		}
		.bz-list{
			height: 40rpx;
			font-size: $font-sm+2rpx;
			color: $font-color-dark;
			text{
				display: inline-block;
				margin-right: 30rpx;
			}
		}
		.con-list{
			flex: 1;
			display:flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40rpx;
		}
		.red{
			color: $uni-color-primary;
    }
    .select-time {
      position: relative;
    }
    .select-label {
      width: 160rpx;
      display: inline-block;
    }
	}
	
	/* 评价 */
	.eva-section{
		display: flex;
		flex-direction: column;
		padding: 20rpx 30rpx;
		background: #fff;
		margin-top: 16rpx;
		.e-header{
			display: flex;
			align-items: center;
			height: 70rpx;
			font-size: $font-sm + 2rpx;
			color: $font-color-light;
			.tit{
				font-size: $font-base + 2rpx;
				color: $font-color-dark;
				margin-right: 4rpx;
			}
			.tip{
				flex: 1;
				text-align: right;
			}
			.icon-you{
				margin-left: 10rpx;
			}
		}
	}
	.eva-box{
		display: flex;
		padding: 20rpx 0;
		.portrait{
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
			border-radius: 100px;
		}
		.right{
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26rpx;
			.con{
				font-size: $font-base;
				color: $font-color-dark;
				padding: 20rpx 0;
			}
			.bot{
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color:$font-color-light;
			}
		}
	}
	/*  详情 */
	.detail-desc{
		background: #fff;
		margin-top: 16rpx;
		.d-header{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			font-size: $font-base + 2rpx;
			color: $font-color-dark;
			position: relative;
				
			text{
				padding: 0 20rpx;
				background: #fff;
				position: relative;
				z-index: 1;
			}
			&:after{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300rpx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc; 
			}
		}
	}
	
	/* 规格选择弹窗 */
	.attr-content{
		padding: 10rpx 30rpx;
		.a-t{
			display: flex;
			image{
				width: 170rpx;
				height: 170rpx;
				flex-shrink: 0;
				margin-top: -40rpx;
				border-radius: 8rpx;;
			}
			.right{
        width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: $font-lg + 2rpx;
				color: $font-color-base;
        line-height: 42rpx;
        margin-top: 40rpx;
			}
		}
		.attr-list{
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2rpx;
			color: $font-color-base;
			padding-top: 30rpx;
			// padding-left: 10rpx;
		}
		.item-list{
			padding: 20rpx 0 0;
      display: flex;
      flex-wrap: wrap;
			text{
				display: flex;
				align-items: center;
			// 	// background: #eee;
			// 	margin-bottom: 20rpx;
				min-width: 60rpx;
				height: 60rpx;
				font-size: $font-base;
				color: $font-color-dark;
			}
			.selected{
				background: #fbebee;
				color: $uni-color-primary;
      }
      .item-list-content {
        display: flex;
        text {
          margin-left: 10rpx;
          padding: 20rpx;
          background: #eee;
          font-size: $font-base;
        }
      }
      .daily-set {
        display: flex;
        justify-content: center;
        align-items: center;
        text {
          display: flex;
          justify-content: center;
        }
        .daily-num {
          width: 80rpx;
          height: 40rpx;
          border: 1px solid #cccccc;
          text-align: center;
        }
      }
      .attr-list-label {
        margin-bottom: 20rpx;
        min-width: 140rpx;
        height: 60rpx;
        text-align: left;
        font-size: $font-base;
        color: $font-color-dark;
        background: #fff;
      }
      .item-list-time {
        flex: 1;
        display: flex;
        justify-content: space-between;
      }
      .selected-color {
        color: $base-color;
      }
      .sum-piece {
        display: flex;
        text {
          min-width: 30rpx;
        }
      }
		}
	}
	
	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}
		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 50vh;
			border-radius: 10rpx 10rpx 0 0;
			background-color: #fff;
			.btn{
				height: 66rpx;
				line-height: 66rpx;
				border-radius: 100rpx;
				background: $uni-color-primary;
				font-size: $font-base + 2rpx;
				color: #fff;
				margin: 60rpx auto 20rpx;
			}
		}
		@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}
			100% {
				transform: translateY(0%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(120%);
			}
		}
	}
	
	/* 底部操作菜单 */
	.page-bottom{
		position:fixed;
		left: 30rpx;
		bottom:30rpx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690rpx;
		height: 100rpx;
		background: rgba(255,255,255,.9);
		box-shadow: 0 0 20rpx 0 rgba(0,0,0,.5);
		border-radius: 16rpx;
    
    .sum-price {
      width: 150rpx;
      height: 80rpx;
      display: flex;
      justify-content: center;
      // align-items: center;
      flex-direction: column;
      font-size: $font-sm;
      color: $font-color-base;
      .sum {
        color: $base-color;
      }
    }
		.p-b-btn{
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96rpx;
			height: 80rpx;
			.yticon{
				font-size: 40rpx;
				line-height: 48rpx;
				color: $font-color-light;
			}
			&.active, &.active .yticon{
				color: $uni-color-primary;
			}
			.icon-fenxiang2{
				font-size: 42rpx;
				transform: translateY(-2rpx);
			}
			.icon-shoucang{
				font-size: 46rpx;
			}
		}
		.action-btn-group{
			display: flex;
			height: 76rpx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20rpx 40rpx -16rpx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30,#fa436a,#F56C6C);
			margin-left: 20rpx;
			position:relative;
			// &:after{
			// 	content: '';
			// 	position:absolute;
			// 	top: 50%;
			// 	right: 50%;
			// 	transform: translateY(-50%);
			// 	height: 28rpx;
			// 	width: 0;
			// 	border-right: 1px solid rgba(255,255,255,.5);
			// }
			.action-btn{
				display:flex;
				align-items: center;
				justify-content: center;
				width: 450rpx;
				height: 100%;
				font-size: $font-base ;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
      .disabled {
        background-color: $font-color-disabled;
      }
    }
    .action-btn-group-disabled {
      box-shadow: 0 20rpx 40rpx -16rpx $font-color-disabled;
      box-shadow: 1px 2px 5px $font-color-disabled;
    }
	}
	
</style>
